<template>
  <div id="index">
    <el-row type="flex" justify="center" style="margin-top: 50px;">
      <el-col :span="16">
        <el-row>
          <el-col :span="24">
            <h2>尊敬的小主您好，欢迎访问系统！</h2>
          </el-col>
        </el-row>
        <el-tabs type="border-card">
          <el-tab-pane label="用户配置">
            <el-row>
              <el-col :span="24">
                <el-form>
                  <el-form-item label="头像">
                    <upload :links="link" :size="1" :accept="'.jpg,.jpeg,.png,.gif'" />
                  </el-form-item>
                  <el-form-item label="用户名">
                    <el-input v-model="form.username" />
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="form.password" />
                  </el-form-item>
                  <el-form-item label="手机号">
                    <el-input v-model="form.mobile" />
                  </el-form-item>
                  <el-form-item label="昵称">
                    <el-input v-model="form.nickName" />
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-radio-group v-model="form.dictSex">
                      <el-radio-button label="1">男</el-radio-button>
                      <el-radio-button label="2">女</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item style="text-align: center">
                    <el-button style="width: 20%" type="primary" @click="submit">提交</el-button>
                    <el-button style="width: 20%">取消</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="地址管理">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="tel" label="电话" />
              <el-table-column prop="province" label="省" />
              <el-table-column prop="city" label="市" />
              <el-table-column prop="county" label="区" />
              <el-table-column prop="addressDetail" label="详细地址" />
              <el-table-column prop="isDefault" label="默认地址">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isDefault" @change="setDefault(scope.row.id)" />
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="addressDel(scope.row.id)">删除</el-button>
                  <el-button type="text" size="small" @click="intoAddressEdit(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button type="primary" style="float:right;margin-top:15px;" @click="intoAddressEdit({})">添加</el-button>
          </el-tab-pane>
          <el-tab-pane label="积分商城">
            <h6>当前剩余积分：{{ form.integral }}</h6>

            <el-table :data="integralGoodData" style="width: 100%">
              <el-table-column prop="name" label="商品名称" />
              <el-table-column prop="name" label="商品图片">
                <template slot-scope="scope">
                  <template v-if="scope.row.imageIcon != undefined && scope.row.imageIcon.length > 0">
                    <el-image style="width: 35px; height: 35px;margin:-10px 0;" fit="cover" :src="scope.row.imageIcon[0].url" :preview-src-list="scope.row.imageIcon.map(img => img.url)" />
                  </template>
                </template>
              </el-table-column>
              <el-table-column prop="integral" label="消耗积分" />
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="exchange(scope.row.id)">兑换</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button type="primary" style="float:right;margin-top:15px;" @click="dialogVisibleIntegral = true">兑换历史</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog title="地址编辑" :visible.sync="dialogVisible">
      <el-form v-if="dialogVisible" :model="addressForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="addressForm.name" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="addressForm.tel" />
        </el-form-item>
        <el-form-item label="选择地址">
          <tree-select v-model="addressForm.areaCode" :flat="true" :options="regionTree" />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="addressForm.addressDetail" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addressSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import upload from '@/components/upload/index'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { info, add } from '@/api/member/user'
import { getToken } from '@/utils/auth'
import api, { setDefault } from '@/api/mall/address'
import { listRegion } from '@/api/base/region'
import integralApi, { exchange } from '@/api/mall/integral-goods'
import integralHistoryApi from '@/api/mall/integral-good-user'
export default {
  name: 'UserInfoEdit',
  components: { upload, TreeSelect },
  data() {
    return {
      id: undefined,
      form: {},
      link: [],
      tableData: [],
      integralGoodData: [],
      integralHistoryList: [],
      addressForm: undefined,
      dialogVisible: false,
      dialogVisibleIntegral: false,
      regionTree: []
    }
  },
  mounted() {
    if (getToken()) {
      info().then(res => {
        const data = res.data.data
        data.password = undefined
        this.form = data
        this.link.push({ url: data.avatar })
      })
      listRegion({ limit: 9999 }).then(res => {
        this.regionTree = this.getTree(res.data.data.records)
      })
      this.initAddressData()
    }
  },
  methods: {
    initAddressData() {
      api.list().then(res => {
        this.tableData = res.data.data.records
      })
      integralApi.list().then(res => {
        this.integralGoodData = res.data.data.records
      })
      integralHistoryApi.list({ condtion: '{ isMy: "true" }' }).then(res => {
        this.integralHistoryList = res.data.data.records
      })
    },
    exchange(id) {
      exchange({ id }).then(res => {
        this.$notify.success('兑换成功')
      })
    },
    setDefault(id, val) {
      setDefault(id).then(res => {
        this.initAddressData()
      })
    },
    intoAddressEdit(row) {
      if (row !== false) {
        this.addressForm = row
      }
      this.dialogVisible = true
    },
    submit() {
      this.form.avatar = this.link[0].url
      add(this.form).then(res => {
        if (res.data.code === 200) {
          this.$notify.success({
            title: '成功',
            message: '更新数据成功'
          })
        }
      })
    },
    addressSubmit() {
      api.add(this.addressForm).then(res => {
        if (res.data.code === 200) {
          this.$notify.success({
            title: '成功',
            message: '操作成功'
          })
          this.initAddressData()
          this.dialogVisible = false
        }
      })
    },
    addressDel(id) {
      api.remove(id).then(res => {
        if (res.data.code === 200) {
          this.$notify.success({
            title: '成功',
            message: '操作成功'
          })
          this.initAddressData()
        }
      })
    },
    getTree(tree = []) {
      const arr = []
      if (tree.length !== 0) {
        tree.forEach(item => {
          const obj = {}
          obj.label = item.name
          obj.id = item.code
          if (item.children && item.children.length > 0) {
            obj.children = this.getTree(item.children)
          }
          arr.push(obj)
        })
      }
      return arr
    }
  }
}
</script>

<style scoped>
  #index {
    width: 100%;
  }
</style>
